<template>
	<view class="page">
		<view class="uni-header">
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="item.name">
				<image class="icon" :src="item.iconPath" mode="widthFix"></image>
				<text class="title">{{item.title}}</text>
				<switch v-show="isReady" @change="change($event,item.name)" name="email" class="switch" color="#1ba034"
					:checked="config[item.name]" />
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="message-box__content">
				<view class="message-box__header" @click="close">
					<text class="message-box__header-title">绑定微信公众号</text>
					<text class="message-box__header-close">X</text>
				</view>
				<view class="message-box__body">
					<image width="400px" mode="widthFix" src="https://web-assets.dcloud.net.cn/unidoc/zh/weixin.jpg">
					</image>
					<text>使用微信扫一扫上方二维码，及时获取通知</text>
				</view>
				<view class="message-box__footer">
					<button @click="close" class="message-box__footer_btn">关闭</button>
				</view>
			</view>
		</uni-popup>
		<!-- <uni-popup ref="popup" type="center">
			<view class="popup-conetnt">
				<image width="400px" mode="widthFix" src="https://web-assets.dcloud.net.cn/unidoc/zh/weixin.jpg"></image>
				<text class="popup-conetnt-text">请扫码绑定公众号</text>
			</view>
		</uni-popup> -->

	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				isReady: false,
				config: {
					email: true,
					notification_center: true,
					weixin_official_accounts: true
				},
				list: [{
						"title": "电子邮箱通知",
						"name": "email",
						"iconPath": "/uni_modules/uni-notification-center/static/email.png"
					},
					{
						"title": "应用通知中心",
						"name": "notification_center",
						"iconPath": "/uni_modules/uni-notification-center/static/notice.png"
					},
					{
						"title": "微信公众号消息",
						"name": "weixin_official_accounts",
						"iconPath": "/uni_modules/uni-notification-center/static/wechat.png"
					}
				]
			}
		},
		async mounted() {
			this.isReady = false
			let res = await db.collection('uni-notification-config')
				.where('"user_id" == $cloudEnv_uid')
				.get()
			console.log(res);
			this.isReady = true
			this.config = res.result.data[0]
			delete this.config._id
			// this.$refs.popup.open()
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			async change(e, name) {
				const {
					value
				} = e.detail
				console.log(value);
				if (name == "weixin_official_accounts" && value) {
					return this.open()
				}

				this.config[name] = value
				uni.showLoading({
					title: '更新中',
					mask: true
				});
				let res
				try {
					res = await db.collection('uni-notification-config')
						.where('"user_id" == $cloudEnv_uid')
						.update(this.config)
				} catch (e) {
					this.config[name] = !this.config[name]
				}
				uni.showToast({
					title: res.result.errCode ? res.result.errMsg : '更新成功',
					icon: 'none'
				});
				uni.hideLoading()
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	view,
	text {
		display: flex;
	}

	/* #endif */
	.page {
		flex-direction: column;
	}

	.list {
		flex-direction: column;
		background-color: #FFF;
		padding: 0 10px 10px 10px;
		width: 550rpx;
	}

	/* @media screen and (min-width: 500px) {
		.list {
			flex-direction: row;
		}
	} */

	.item {
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin: 15px;
		padding: 15px;
		border-radius: 10px;
		background-color: #f9f9fc;
	}

	.icon {
		width: 30px;
		margin-right: 16rpx;
	}

	.title {
		font-size: 14px;
	}

	.switch {
		transform: scale(0.65);
	}

	.message-box__content {
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		background-clip: padding-box;
		border-radius: 2px;
		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
		pointer-events: auto;
	}

	.message-box__header {
		position: relative;
		padding: 16px 24px;
		justify-content: space-between;
		width: 80%;
		margin-top: 20px;
	}

	.message-box__header-title {
		font-weight: 500;
		font-size: 16px;
	}

	.message-box__header-close {
		width: 50px;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		color: rgba(0, 0, 0, .45);
		font-weight: 700;
		cursor: pointer;
		transition: color .3s;
	}

	.message-box__body {
		padding: 0 24px 24px 24px;
		font-size: 14px;
		flex-direction: column;
		align-items: center;
	}

	.message-box__footer {
		width: 100%;
		height: 60px;
		position: relative;
	}

	.message-box__footer_btn {
		color: #fff;
		background-color: #269939;
		transition: all .3s;
		position: absolute;
		right: 25px;
		top: 0;
		height: 40px;
		line-height: 40px;
	}

	/* #ifdef H5 */

	@media screen and (min-width: 500px) {
		.list {
			flex-direction: row;
			background-color: #FFF;
			width: auto;
			border-radius: 10px;
			padding: 15px 10px;
			box-shadow: -1px -1px 5px 0 rgb(0 0 0 / 10%);
			margin: 15px;
		}

		.title {
			font-size: 14px;
		}

		.icon {
			width: 55px;
			margin-right: 16rpx;
		}

		.switch {
			transform: scale(0.6);
		}
	}

	/* #endif */
</style>
